<template>
  <div class="app-container">
    <el-form ref="searchForm" :inline="true" label-width="120px" :model="searchForm" class="demo-form-inline">
      <el-form-item label="套账编码：">
        <el-input v-model="searchForm.financialCode" size="small" placeholder="套账编码：" />
      </el-form-item>
      <el-form-item label="公司名称：">
        <el-input v-model="searchForm.companyName" size="small" placeholder="公司名称：" />
      </el-form-item>
      <el-form-item label="门店编号">
        <el-input v-model="searchForm.storeId" size="small" placeholder="门店编号" />
      </el-form-item>
      <el-form-item label="门店名称：">
        <el-input v-model="searchForm.storeName" size="small" placeholder="门店名称：" />
      </el-form-item>
      <el-form-item label="合同编号：">
        <el-input v-model="searchForm.contractId" size="small" placeholder="合同编号：" />
      </el-form-item>
      <el-form-item label="合同状态">
        <el-select v-model="searchForm.contractState" size="small" placeholder="请选择活动区域">
          <el-option label="租入合同" value="1" />
          <el-option label="租出合同" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作人">
        <el-input v-model="searchForm.operUser" size="small" placeholder="操作人" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="searchHandler">查询</el-button>
        <el-button type="success" size="small" @click="restHandler">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 按钮组 -->
    <el-row>
      <el-button type="primary" size="small" @click="toAdd">新增租入合同</el-button>
      <el-button type="primary" size="small" :disabled="isDisabled" @click="Disabled">修改基础信息</el-button>
      <el-button type="primary" :disabled="isDisabled" size="small" @click="earlyDisabled">提前终止合同</el-button>
      <el-button type="primary" :disabled="isDisabled" size="small" @click="changePact">变更租入合同</el-button>
      <el-button type="primary" :disabled="isDisabled" size="small">变更利润中心</el-button>
      <el-button type="primary" size="small" @click="toOper">操作日志</el-button>
      <el-button type="primary" size="small" @click="preview">凭证预览</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      @selection-change="selectId"
      stripe
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        @selection-change="selectId"
        width="55">
      </el-table-column>
      <el-table-column
        prop="contractId"
        label="合同编号"
        width="150"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="name"
        label="合同状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag>{{ scope.row.contractType==='1'?'租入合同':'租出合同' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="isSublease"
        label="是否有转租"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-tag>{{ scope.row.isSublease==='1'?'是':'否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="companyName"
        label="公司名称"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="financialCode"
        label="账套编码"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="storeId"
        label="门店编码"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="storeName"
        label="门店名称"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="storeOpeningTime"
        label="开业时间"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="assetsType"
        label="资产类别"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-tag>{{ scope.row.assetsType==='1'?'房屋':'设备' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="leasePurpose"
        label="资产用途"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-tag>{{ scope.row.leasePurpose==='1'?'门店经营':'办公' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="rentPayment"
        label="付款方式"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-tag>{{ scope.row.leasePurpose==='1'?'先付后用':'先用后付' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="cdcDeposit.followPaymentTime"
        label="约定付款时间"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="cdcDeposit.depositPaymentMode"
        label="租金支付方式"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="day"
        label="租赁期限"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contractStartTime"
        label="合同开始时间"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contractEndTime"
        label="合同终止时间"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="isVatinvoice"
        label="是否提供增值税专用发票"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.isVatinvoice === '1'?'是':'否' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="最近一次操作时间"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="operUser"
        label="操作人"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="XiangQingHandler(scope.row)">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="searchForm.page"
      :page-sizes="[5, 10,20, 30]"
      :page-size="searchForm.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 查看详情 -->
    <el-dialog :title="XiangQingData.title" width="60%" :visible.sync="XiangQing">
      <el-row :gutter="20">
        <el-col :span="8">
          <div>年折现率：</div>
          <div>租赁负债（现值）</div>
          <hr>
          <div>合同编号：</div>
          <div>合同名称:</div>
          <div>资产类别:</div>
          <div>租赁资产用途:</div>
          <div>合同开始日期：</div>
        </el-col>
        <el-col :span="4">
          <div>{{ Math.ceil(Math.random()*10) }}</div>
          <div>{{ Math.ceil(Math.random()*2000) }}元</div>
          <hr>
          <div>{{ XiangQingData.contractId }}</div>
          <div>{{ XiangQingData.contractName }}</div>
          <div>{{ XiangQingData.assetsType==='1'?'房屋':'设备' }}</div>
          <div>{{ XiangQingData.leasePurpose === '1'?'门店经营':'办公' }}</div>
          <div>{{ XiangQingData.contractStartTime }}</div>
          <div />
        </el-col>
        <el-col :span="8">
          <div>租赁负债-租赁付款额（元）：</div>
          <div>租赁负债-未确认融资费用（元）</div>
          <hr>
          <div>承租人名称:</div>
          <div>公司名称 :</div>
          <div>租金支付方式:</div>
          <div>合同是否可撤销:</div>
          <div>合同结束日期：</div>
        </el-col>
        <el-col :span="4">
          <div>{{ Math.ceil(Math.random()*2000) }}元</div>
          <div>{{ Math.ceil(Math.random()*5000) }}元</div>
          <hr>
          <div>{{ XiangQingData.lessorName }}</div>
          <div>{{ XiangQingData.companyName }}</div>
          <div>{{ XiangQingData.rentPayment==='1'?'先付后使用':'先使用后付' }}</div>
          <div>{{ XiangQingData.iscontractRevoke==='1'?'是':'否' }}</div>
          <div><el-tag>{{ XiangQingData.contractEndTime }}</el-tag></div>
        </el-col>
      </el-row>
    </el-dialog>

    <!--变更租入合同显示-->
    <change-info :changeInfo="changeInfo" :pactDataFrom="pactDataFrom" @colse="colse" @pactHandler="pactHandler"></change-info>

    <!--  提前终止合同  -->
    <early-pact :earlyPact="earlyPact" @earlyClose="earlyClose" :earlyClose="earlyClose" :earlyChangePact="earlyChangePact" @early="early" @preview="preview"></early-pact>
  </div>
</template>

<script>
import { list, getChangePact, postChangPact, earlyChangPact } from '@/api/contract'
import myx from '@/store/myx'
import changeInfo from '@/views/contract/components/changeInfo'
import earlyPact from '@/views/contract/components/earlyPact'
export default {
  name: 'UiEdit',
  components: {
    changeInfo,
    earlyPact
  },
  data() {
    return {
      searchForm: {
        financialCode: '',
        companyName: '',
        storeId: '',
        storeName: '',
        contractId: '',
        contractState: '',
        operUser: '',
        page: 1,
        limit: 2
      },
      total: 0,
      XiangQingData: {
        contractId: '',
        contractType: '',
        contractState: '',
        contractName: '',
        financialCode: '',
        companyCode: '',
        companyName: '',
        storeId: '',
        storeName: '',
        contractPeriod: '',
        freeRentTimeStart: '',
        freeRentTimeEnd: '',
        freeRentTerm: '',
        rentPayment: '',
        lessorName: 'Awei',
        assetsLocation: '',
        storeOpeningTime: '',
        iscontractRevoke: '1',
        floorage: '',
        area: '',
        assetsType: '',
        leasePurpose: '',
        contractStartTime: '',
        contractEndTime: '',
        isSublease: '',
        contractMoneyNum: '',
        isVatinvoice: '',
        taxRate: '',
        taxAmount: '',
        stopContract: '',
        falsifyMoney: '',
        falsifyPayTime: '',
        stopEffectTime: '',
        isOffsetMoney: '',
        offsetMoney: '',
        depositReclaimTime: '',
        depositReclaimMoney: '',
        leasePay: '',
        unreFinancingMoney: '',
        impairmentTime: '',
        impairmentMoney: '',
        impairmentWhy: '',
        endTime: '',
        operUser: '',
        isChange: '',
        changeLessor: ''
      },
      tableData: [],
      XiangQing: false,
      loading: true,
      // 多选后是否禁用按钮
      isDisabled: false,
      // 合同ID
      contractId: '',
      // 点击显示修改基础信息
      changeInfo: false,
      // 合同数据
      pactDataFrom: {},
      // 终止合同数据
      earlyPact: {
        cdcDeposit: {
          isDeposit: '',
          depositPaymentTime: '',
          depositMoney: 0
        }
      },
      // 终止合同按钮
      earlyChangePact: false,
      // 合同状态
      contractType: 0
    }
  },
  created() {
    this.getContractData()
  },
  methods: {
    // 搜索
    searchHandler() {
      this.getContractData()
    },
    // 获取合同数据
    getContractData() {
      list(this.searchForm).then(res => {
        const { data } = res
        this.tableData = data.date
        this.total = data.total
        this.tableData.forEach(item => {
          item.day = '36.5'
        })
        this.loading = false
      })
    },
    // 清除表单
    restHandler() {
      this.searchForm.financialCode = ''
      this.searchForm.companyName = ''
      this.searchForm.storeId = ''
      this.searchForm.storeName = ''
      this.searchForm.contractId = ''
      this.searchForm.contractState = ''
      this.searchForm.operUser = ''
    },
    // 去添加页面
    toAdd() {
      this.$router.push({ path: '/contract/in' })
    },
    // 合同详情
    XiangQingHandler(data) {
      this.XiangQing = true
      this.XiangQingData.title = data.companyName + '详情'
      this.XiangQingData.contractId = data.contractId
      this.XiangQingData.contractType = data.contractType
      this.XiangQingData.contractName = data.contractName
      this.XiangQingData.financialCode = data.financialCode
      this.XiangQingData.companyCode = data.companyCode
      this.XiangQingData.companyName = data.companyName
      this.XiangQingData.rentPayment = data.rentPayment
      this.XiangQingData.iscontractRevoke = data.iscontractRevoke
      this.XiangQingData.contractStartTime = data.contractStartTime
      this.XiangQingData.contractEndTime = data.contractEndTime
      console.log(data)
    },
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.getContractData()
    },
    // 前去第几页
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getContractData()
    },
    toOper() {
      this.$router.push({ path: '/log/operLog' })
    },
    selectId(val) {
      if (val.length > 1 || val.length === 0) {
        this.isDisabled = true
      } else {
        this.contractId = val[0].contractId
        this.contractType = val[0].contractType
        this.isDisabled = false
      }
    },
    // 获取修改基础信息数据
    Disabled() {
      getChangePact(this.contractId).then(res => {
        this.pactDataFrom = res.data
        this.changeInfo = true
      })
    },
    // 点击取消关闭弹窗
    colse() {
      this.changeInfo = false
    },
    earlyDisabled() {
      // 终止合同
      getChangePact(this.contractId).then(res => {
        this.earlyPact = res.data
        for (var key in this.earlyPact.cdcDeposit) {
          this.earlyPact[key] = this.earlyPact.cdcDeposit[key]
        }
        delete this.earlyPact.paymentPlan
        delete this.earlyPact.cdcDeposit
        // 是否有违约金
        if (earlyPact.falsifyMoney && earlyPact.falsifyMoney > 0) {
          this.earlyPact.isDdit = 1
        } else {
          this.earlyPact.isDdit = 2
        }
        this.earlyChangePact = true
      })
    },
    // 关闭终止合同弹窗
    earlyClose() {
      this.earlyChangePact = false
    },
    // 提交数据
    pactHandler() {
      delete this.pactDataFrom.paymentPlan
      delete this.pactDataFrom.cdcDeposit
      postChangPact(this.pactDataFrom).then(() => {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
      })
      this.changeInfo = false
    },
    // 提交终止
    early() {
      earlyChangPact(this.earlyPact).then(() => {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
      })
      this.earlyChangePact = false
    },
    // 预览凭证按钮
    preview() {
      this.$router.push({ name: 'pzyl' })
    },
    // 变更租入合同
    changePact() {
      myx.commit('SET_DATA', {
        contractId: this.contractId, contractType: this.contractType
      })
      this.$router.push({ name: 'changePact' })
    }
  }
}
</script>

<style lang="scss" scoped>
	.el-row{
		margin: 30px 0;
		div{
			margin-bottom: 10px;
		}
	}
</style>
